<template>
  <div class="capsule-chart">
    <div class="chart-title">{{ title }}</div>
    <div class="chart-content">
      <div 
        v-for="(item, index) in data" 
        :key="index" 
        class="capsule-item"
      >
        <div class="capsule-label">{{ item.name }}</div>
        <div class="capsule-bar">
          <div 
            class="capsule-fill" 
            :style="{ width: item.percentage + '%', backgroundColor: item.color }"
          ></div>
        </div>
        <div class="capsule-value">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CapsuleChart',
  props: {
    title: {
      type: String,
      default: '胶囊图'
    },
    data: {
      type: Array,
      default: () => [
        { name: '数据1', value: 85, percentage: 85, color: '#00d4ff' },
        { name: '数据2', value: 72, percentage: 72, color: '#00ff88' },
        { name: '数据3', value: 68, percentage: 68, color: '#ff6b6b' },
        { name: '数据4', value: 45, percentage: 45, color: '#ffd93d' },
        { name: '数据5', value: 38, percentage: 38, color: '#6c5ce7' }
      ]
    }
  }
}
</script>

<style scoped>
.capsule-chart {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.chart-title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.chart-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.capsule-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.capsule-label {
  color: #fff;
  font-size: 12px;
  width: 60px;
  text-align: right;
}

.capsule-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.capsule-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.capsule-value {
  color: #fff;
  font-size: 12px;
  width: 40px;
  text-align: left;
}
</style>
